<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>动态列表 - 社交圈</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #165DFF;
            --secondary: #722ED1;
            --success: #00B42A;
            --warning: #FF7D00;
            --danger: #F53F3F;
            --text-primary: #1D2129;
            --text-secondary: #4E5969;
            --text-tertiary: #86909C;
            --bg-light: #F2F3F5;
            --bg-white: #FFFFFF;
            --border-light: #E5E6EB;
            --radius: 10px;
            --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .nav-actions {
            display: flex;
            gap: 16px;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
        }
        
        /* 动态分类 */
        .feed-tabs {
            display: flex;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            overflow-x: auto;
            scrollbar-width: none;
        }
        
        .feed-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .feed-tab {
            padding: 14px 20px;
            white-space: nowrap;
            font-size: 15px;
            font-weight: 500;
            color: var(--text-secondary);
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            flex-shrink: 0;
        }
        
        .feed-tab.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
        }
        
        /* 动态列表容器 */
        .feed-container {
            padding: 12px 16px;
        }
        
        /* 动态卡片通用样式 */
        .feed-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin-bottom: 16px;
            overflow: hidden;
        }
        
        /* 动态头部 */
        .feed-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .feed-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid var(--border-light);
        }
        
        .feed-author {
            flex: 1;
        }
        
        .author-name {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .feed-time {
            font-size: 12px;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .feed-menu {
            color: var(--text-tertiary);
            background: none;
            border: none;
            font-size: 16px;
        }
        
        /* 动态内容 */
        .feed-content {
            padding: 0 16px 12px;
        }
        
        .feed-text {
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 12px;
        }
        
        .feed-text a {
            color: var(--primary);
            text-decoration: none;
        }
        
        /* 无图动态 */
        .feed-no-image .feed-content {
            padding-bottom: 16px;
        }
        
        /* 单图动态 */
        .feed-single-image .feed-image {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .feed-single-image .feed-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* 多图动态 - 2张图 */
        .feed-multi-image.two-images .feed-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        /* 多图动态 - 3张图 */
        .feed-multi-image.three-images .feed-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .feed-multi-image.three-images .feed-images div:nth-child(3) {
            grid-column: 1 / 3;
        }
        
        /* 多图动态 - 4张及以上 */
        .feed-multi-image.four-images .feed-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        /* 多图动态 - 9张图 */
        .feed-multi-image.nine-images .feed-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .feed-multi-image .feed-image {
            aspect-ratio: 1/1;
            overflow: hidden;
            position: relative;
        }
        
        .feed-multi-image .feed-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .feed-multi-image .feed-image:hover img {
            transform: scale(1.05);
        }
        
        /* 图片数量遮罩 */
        .image-count-mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        
        /* 动态标签和话题 */
        .feed-topics {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .feed-topic {
            color: var(--primary);
            font-size: 14px;
        }
        
        /* 动态统计 */
        .feed-stats {
            padding: 8px 16px;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .feed-stat {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 动态操作 */
        .feed-actions {
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
        }
        
        .feed-action {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 0;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 14px;
        }
        
        .feed-action.liked {
            color: var(--danger);
        }
        
        .feed-action:hover {
            background-color: rgba(0, 0, 0, 0.02);
        }
        
        /* 评论区域 */
        .feed-comments {
            padding: 0 16px 16px;
        }
        
        .comment-item {
            margin-bottom: 12px;
            padding: 8px 10px;
            background-color: var(--bg-light);
            border-radius: 8px;
        }
        
        .comment-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }
        
        .comment-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-author {
            font-size: 13px;
            font-weight: 600;
        }
        
        .comment-time {
            font-size: 11px;
            color: var(--text-tertiary);
            margin-left: auto;
        }
        
        .comment-text {
            font-size: 14px;
            line-height: 1.5;
        }
        
        .comment-text a {
            color: var(--primary);
            text-decoration: none;
        }
        
        .comment-actions {
            display: flex;
            gap: 12px;
            margin-top: 6px;
            font-size: 12px;
        }
        
        .comment-action {
            display: flex;
            align-items: center;
            gap: 3px;
            color: var(--text-tertiary);
            background: none;
            border: none;
        }
        
        .comment-action.liked {
            color: var(--danger);
        }
        
        .show-more-comments {
            width: 100%;
            padding: 6px 0;
            background: none;
            border: none;
            color: var(--primary);
            font-size: 13px;
            text-align: center;
        }
        
        /* 评论输入框 */
        .comment-input-container {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-top: 1px solid var(--border-light);
        }
        
        .comment-avatar-input {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-input {
            flex: 1;
            padding: 8px 12px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 14px;
            outline: none;
        }
        
        .comment-tools {
            display: flex;
            gap: 10px;
            color: var(--text-secondary);
        }
        
        .comment-tool {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 18px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 70px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 22px;
        }
        
        /* 发布动态按钮 */
        .fab-post {
            position: fixed;
            right: 24px;
            bottom: 86px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
            border: none;
            font-size: 24px;
            z-index: 999;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            background-color: var(--bg-white);
            border: 1px solid var(--border-light);
            color: var(--text-primary);
            font-size: 15px;
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        /* 骨架屏样式 */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }
        
        @keyframes skeleton-loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <div class="nav-title">朋友圈</div>
        <div class="nav-actions">
            <button class="nav-btn" id="searchBtn">
                <i class="fas fa-search"></i>
            </button>
            <button class="nav-btn" id="messageBtn">
                <i class="far fa-bell"></i>
            </button>
        </div>
    </div>
    
    <!-- 动态分类 -->
    <div class="feed-tabs">
        <button class="feed-tab active">全部动态</button>
        <button class="feed-tab">关注</button>
        <button class="feed-tab">推荐</button>
        <button class="feed-tab">热门</button>
        <button class="feed-tab">话题</button>
    </div>
    
    <!-- 动态列表容器 -->
    <div class="feed-container">
        <!-- 无图动态 -->
        <div class="feed-card feed-no-image">
            <div class="feed-header">
                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="feed-avatar">
                <div class="feed-author">
                    <div class="author-name">旅行爱好者</div>
                    <div class="feed-time">
                        <i class="fas fa-clock"></i>
                        <span>2小时前</span>
                    </div>
                </div>
                <button class="feed-menu" id="menu1">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="feed-content">
                <div class="feed-text">
                    刚刚规划好了下一次旅行路线！从青海湖到茶卡盐湖，再到敦煌莫高窟，最后到张掖丹霞地貌。有没有去过的朋友给点建议？特别是交通和住宿方面，还有哪些必吃的当地美食？@背包客小明 @旅行达人
                </div>
                
                <div class="feed-topics">
                    <span class="feed-topic">#青海旅行#</span>
                    <span class="feed-topic">#西北环线#</span>
                    <span class="feed-topic">#旅行攻略#</span>
                </div>
            </div>
            
            <div class="feed-stats">
                <div class="feed-stat">
                    <i class="far fa-heart"></i>
                    <span>32</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-comment"></i>
                    <span>18</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-share-square"></i>
                    <span>5</span>
                </div>
            </div>
            
            <div class="feed-actions">
                <button class="feed-action" id="like1">
                    <i class="far fa-heart"></i>
                    <span>点赞</span>
                </button>
                <button class="feed-action" id="comment1">
                    <i class="far fa-comment"></i>
                    <span>评论</span>
                </button>
                <button class="feed-action" id="share1">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </button>
            </div>
            
            <div class="feed-comments">
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/91/100/100" alt="评论者头像" class="comment-avatar">
                        <span class="comment-author">背包客小明</span>
                        <span class="comment-time">1小时前</span>
                    </div>
                    <div class="comment-text">
                        青海湖建议住湖边的民宿，可以看日出！茶卡盐湖一定要选晴天去，不然拍不出天空之镜的效果。
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action" id="commentLike1">
                            <i class="far fa-heart"></i>
                            <span>8</span>
                        </button>
                        <button class="comment-action" id="reply1">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
                
                <button class="show-more-comments" id="showMoreComments1">
                    查看更多17条评论
                </button>
            </div>
            
            <div class="comment-input-container">
                <img src="https://picsum.photos/id/237/100/100" alt="我的头像" class="comment-avatar-input">
                <input type="text" class="comment-input" placeholder="添加评论...">
                <div class="comment-tools">
                    <button class="comment-tool" id="commentImage1">
                        <i class="far fa-image"></i>
                    </button>
                    <button class="comment-tool" id="commentEmoji1">
                        <i class="far fa-smile"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 单图动态 -->
        <div class="feed-card feed-single-image">
            <div class="feed-header">
                <img src="https://picsum.photos/id/22/100/100" alt="用户头像" class="feed-avatar">
                <div class="feed-author">
                    <div class="author-name">美食博主</div>
                    <div class="feed-time">
                        <i class="fas fa-clock"></i>
                        <span>昨天 18:30</span>
                    </div>
                </div>
                <button class="feed-menu" id="menu2">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="feed-content">
                <div class="feed-text">
                    周末在家尝试做了红烧肉，按照奶奶的秘方改良了一下，加入了一点点陈皮提香，口感更丰富了！第一次做卖相还不错，味道也很赞，分享给大家~
                </div>
                
                <div class="feed-image">
                    <img src="https://picsum.photos/id/292/800/600" alt="动态图片">
                </div>
                
                <div class="feed-topics">
                    <span class="feed-topic">#家常菜#</span>
                    <span class="feed-topic">#红烧肉#</span>
                    <span class="feed-topic">#美食分享#</span>
                </div>
            </div>
            
            <div class="feed-stats">
                <div class="feed-stat">
                    <i class="far fa-heart"></i>
                    <span>128</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-comment"></i>
                    <span>46</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-share-square"></i>
                    <span>23</span>
                </div>
            </div>
            
            <div class="feed-actions">
                <button class="feed-action liked" id="like2">
                    <i class="fas fa-heart"></i>
                    <span>已赞</span>
                </button>
                <button class="feed-action" id="comment2">
                    <i class="far fa-comment"></i>
                    <span>评论</span>
                </button>
                <button class="feed-action" id="share2">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </button>
            </div>
            
            <div class="feed-comments">
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/45/100/100" alt="评论者头像" class="comment-avatar">
                        <span class="comment-author">吃货小王</span>
                        <span class="comment-time">昨天 19:15</span>
                    </div>
                    <div class="comment-text">
                        看起来太美味了！能分享一下具体做法吗？特别是酱汁的调配比例~
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action liked" id="commentLike2">
                            <i class="fas fa-heart"></i>
                            <span>24</span>
                        </button>
                        <button class="comment-action" id="reply2">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
                
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/22/100/100" alt="评论者头像" class="comment-avatar">
                        <span class="comment-author">美食博主</span>
                        <span class="comment-time">昨天 20:05</span>
                    </div>
                    <div class="comment-text">
                        @吃货小王 没问题！主要是冰糖炒糖色，然后加生抽、老抽、料酒和一点点醋，陈皮泡软后一起炖~ 具体比例我整理一下发出来
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action" id="commentLike3">
                            <i class="far fa-heart"></i>
                            <span>12</span>
                        </button>
                        <button class="comment-action" id="reply3">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
                
                <button class="show-more-comments" id="showMoreComments2">
                    查看更多44条评论
                </button>
            </div>
            
            <div class="comment-input-container">
                <img src="https://picsum.photos/id/237/100/100" alt="我的头像" class="comment-avatar-input">
                <input type="text" class="comment-input" placeholder="添加评论...">
                <div class="comment-tools">
                    <button class="comment-tool" id="commentImage2">
                        <i class="far fa-image"></i>
                    </button>
                    <button class="comment-tool" id="commentEmoji2">
                        <i class="far fa-smile"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 多图动态（2张） -->
        <div class="feed-card feed-multi-image two-images">
            <div class="feed-header">
                <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="feed-avatar">
                <div class="feed-author">
                    <div class="author-name">摄影爱好者</div>
                    <div class="feed-time">
                        <i class="fas fa-clock"></i>
                        <span>3天前</span>
                    </div>
                </div>
                <button class="feed-menu" id="menu3">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="feed-content">
                <div class="feed-text">
                    清晨的海边日出，用长曝光拍了海浪的丝绸效果，另一张是正常曝光的瞬间。同一地点不同参数的对比，你更喜欢哪一张？
                </div>
                
                <div class="feed-images">
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1015/600/600" alt="动态图片1">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1019/600/600" alt="动态图片2">
                    </div>
                </div>
                
                <div class="feed-topics">
                    <span class="feed-topic">#摄影技巧#</span>
                    <span class="feed-topic">#海边日出#</span>
                    <span class="feed-topic">#长曝光#</span>
                </div>
            </div>
            
            <div class="feed-stats">
                <div class="feed-stat">
                    <i class="far fa-heart"></i>
                    <span>95</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-comment"></i>
                    <span>31</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-share-square"></i>
                    <span>12</span>
                </div>
            </div>
            
            <div class="feed-actions">
                <button class="feed-action" id="like3">
                    <i class="far fa-heart"></i>
                    <span>点赞</span>
                </button>
                <button class="feed-action" id="comment3">
                    <i class="far fa-comment"></i>
                    <span>评论</span>
                </button>
                <button class="feed-action" id="share3">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </button>
            </div>
            
            <div class="comment-input-container">
                <img src="https://picsum.photos/id/237/100/100" alt="我的头像" class="comment-avatar-input">
                <input type="text" class="comment-input" placeholder="添加评论...">
                <div class="comment-tools">
                    <button class="comment-tool" id="commentImage3">
                        <i class="far fa-image"></i>
                    </button>
                    <button class="comment-tool" id="commentEmoji3">
                        <i class="far fa-smile"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 多图动态（4张） -->
        <div class="feed-card feed-multi-image four-images">
            <div class="feed-header">
                <img src="https://picsum.photos/id/45/100/100" alt="用户头像" class="feed-avatar">
                <div class="feed-author">
                    <div class="author-name">生活记录者</div>
                    <div class="feed-time">
                        <i class="fas fa-clock"></i>
                        <span>1周前</span>
                    </div>
                </div>
                <button class="feed-menu" id="menu4">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="feed-content">
                <div class="feed-text">
                    周末整理了一下书房，把凌乱的空间重新规划了一番。增加了书架，换了更舒适的椅子，还摆上了几盆绿植。现在工作学习都更有心情了，分享一下前后对比和细节~
                </div>
                
                <div class="feed-images">
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1060/600/600" alt="动态图片1">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1062/600/600" alt="动态图片2">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1066/600/600" alt="动态图片3">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1068/600/600" alt="动态图片4">
                    </div>
                </div>
                
                <div class="feed-topics">
                    <span class="feed-topic">#家居改造#</span>
                    <span class="feed-topic">#书房设计#</span>
                    <span class="feed-topic">#生活美学#</span>
                </div>
            </div>
            
            <div class="feed-stats">
                <div class="feed-stat">
                    <i class="far fa-heart"></i>
                    <span>76</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-comment"></i>
                    <span>24</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-share-square"></i>
                    <span>8</span>
                </div>
            </div>
            
            <div class="feed-actions">
                <button class="feed-action" id="like4">
                    <i class="far fa-heart"></i>
                    <span>点赞</span>
                </button>
                <button class="feed-action" id="comment4">
                    <i class="far fa-comment"></i>
                    <span>评论</span>
                </button>
                <button class="feed-action" id="share4">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </button>
            </div>
            
            <div class="comment-input-container">
                <img src="https://picsum.photos/id/237/100/100" alt="我的头像" class="comment-avatar-input">
                <input type="text" class="comment-input" placeholder="添加评论...">
                <div class="comment-tools">
                    <button class="comment-tool" id="commentImage4">
                        <i class="far fa-image"></i>
                    </button>
                    <button class="comment-tool" id="commentEmoji4">
                        <i class="far fa-smile"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 多图动态（9张） -->
        <div class="feed-card feed-multi-image nine-images">
            <div class="feed-header">
                <img src="https://picsum.photos/id/54/100/100" alt="用户头像" class="feed-avatar">
                <div class="feed-author">
                    <div class="author-name">城市漫步</div>
                    <div class="feed-time">
                        <i class="fas fa-clock"></i>
                        <span>2周前</span>
                    </div>
                </div>
                <button class="feed-menu" id="menu5">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="feed-content">
                <div class="feed-text">
                    用镜头记录城市的角落，9张照片带你看不同时刻的城市风景。有清晨的宁静，午后的阳光，黄昏的浪漫，还有夜晚的璀璨。你最喜欢哪个时刻的城市？
                </div>
                
                <div class="feed-images">
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1031/600/600" alt="动态图片1">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1032/600/600" alt="动态图片2">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1033/600/600" alt="动态图片3">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1036/600/600" alt="动态图片4">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1037/600/600" alt="动态图片5">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1038/600/600" alt="动态图片6">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1039/600/600" alt="动态图片7">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1040/600/600" alt="动态图片8">
                    </div>
                    <div class="feed-image">
                        <img src="https://picsum.photos/id/1041/600/600" alt="动态图片9">
                    </div>
                </div>
                
                <div class="feed-topics">
                    <span class="feed-topic">#城市摄影#</span>
                    <span class="feed-topic">#城市风光#</span>
                    <span class="feed-topic">#街头摄影#</span>
                </div>
            </div>
            
            <div class="feed-stats">
                <div class="feed-stat">
                    <i class="far fa-heart"></i>
                    <span>156</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-comment"></i>
                    <span>52</span>
                </div>
                <div class="feed-stat">
                    <i class="far fa-share-square"></i>
                    <span>31</span>
                </div>
            </div>
            
            <div class="feed-actions">
                <button class="feed-action" id="like5">
                    <i class="far fa-heart"></i>
                    <span>点赞</span>
                </button>
                <button class="feed-action" id="comment5">
                    <i class="far fa-comment"></i>
                    <span>评论</span>
                </button>
                <button class="feed-action" id="share5">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </button>
            </div>
            
            <div class="comment-input-container">
                <img src="https://picsum.photos/id/237/100/100" alt="我的头像" class="comment-avatar-input">
                <input type="text" class="comment-input" placeholder="添加评论...">
                <div class="comment-tools">
                    <button class="comment-tool" id="commentImage5">
                        <i class="far fa-image"></i>
                    </button>
                    <button class="comment-tool" id="commentEmoji5">
                        <i class="far fa-smile"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <button class="load-more" id="loadMoreBtn">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载更多动态</span>
        </button>
    </div>
    
    <!-- 发布动态按钮 -->
    <button class="fab-post" id="postBtn">
        <i class="fas fa-plus"></i>
    </button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item active">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass nav-icon"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell nav-icon"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- 动态操作菜单 -->
    <div class="modal fade" id="feedMenuModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-share-alt me-2"></i> 分享动态
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-bookmark me-2"></i> 收藏动态
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-flag me-2"></i> 举报动态
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0 text-danger" style="font-size: 15px;">
                        <i class="fas fa-ban me-2"></i> 屏蔽作者
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const searchBtn = document.getElementById('searchBtn');
        const messageBtn = document.getElementById('messageBtn');
        const postBtn = document.getElementById('postBtn');
        const feedTabs = document.querySelectorAll('.feed-tab');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const toast = document.getElementById('toast');
        const feedMenuModal = new bootstrap.Modal(document.getElementById('feedMenuModal'));
        const commentInputs = document.querySelectorAll('.comment-input');
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 绑定动态菜单事件
        function bindFeedMenus() {
            document.querySelectorAll('.feed-menu').forEach(menu => {
                menu.addEventListener('click', function() {
                    feedMenuModal.show();
                });
            });
        }
        
        // 绑定点赞事件
        function bindLikeButtons() {
            document.querySelectorAll('.feed-action').forEach(btn => {
                if (btn.querySelector('.fa-heart')) {
                    btn.addEventListener('click', function() {
                        const icon = this.querySelector('i');
                        const text = this.querySelector('span');
                        const statEl = this.closest('.feed-card').querySelector('.feed-stat .fa-heart').parentElement.querySelector('span');
                        let count = parseInt(statEl.textContent);
                        
                        if (this.classList.contains('liked')) {
                            this.classList.remove('liked');
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            text.textContent = '点赞';
                            statEl.textContent = count - 1;
                            showToast('已取消点赞');
                        } else {
                            this.classList.add('liked');
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            text.textContent = '已赞';
                            statEl.textContent = count + 1;
                            showToast('点赞成功');
                        }
                    });
                }
            });
        }
        
        // 绑定评论点赞事件
        function bindCommentLikeButtons() {
            document.querySelectorAll('.comment-action').forEach(btn => {
                if (btn.querySelector('.fa-heart')) {
                    btn.addEventListener('click', function() {
                        const icon = this.querySelector('i');
                        const countEl = this.querySelector('span');
                        let count = parseInt(countEl.textContent);
                        
                        if (this.classList.contains('liked')) {
                            this.classList.remove('liked');
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            countEl.textContent = count - 1;
                            showToast('已取消点赞');
                        } else {
                            this.classList.add('liked');
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            countEl.textContent = count + 1;
                            showToast('点赞成功');
                        }
                    });
                }
            });
        }
        
        // 绑定评论按钮事件
        function bindCommentButtons() {
            document.querySelectorAll('.feed-action').forEach(btn => {
                if (btn.querySelector('.fa-comment')) {
                    btn.addEventListener('click', function() {
                        const commentInput = this.closest('.feed-card').querySelector('.comment-input');
                        commentInput.focus();
                        showToast('请输入评论内容');
                    });
                }
            });
        }
        
        // 绑定回复按钮事件
        function bindReplyButtons() {
            document.querySelectorAll('.comment-action').forEach(btn => {
                if (btn.querySelector('.fa-comment') && !btn.classList.contains('liked')) {
                    btn.addEventListener('click', function() {
                        const commentItem = this.closest('.comment-item');
                        const commentAuthor = commentItem.querySelector('.comment-author').textContent;
                        const commentInput = this.closest('.feed-card').querySelector('.comment-input');
                        
                        commentInput.value = `@${commentAuthor} `;
                        commentInput.focus();
                    });
                }
            });
        }
        
        // 绑定查看更多评论事件
        function bindShowMoreComments() {
            document.querySelectorAll('.show-more-comments').forEach(btn => {
                btn.addEventListener('click', function() {
                    const text = this.textContent;
                    if (text.includes('查看更多')) {
                        this.textContent = '收起评论';
                        showToast('已加载全部评论');
                    } else {
                        this.textContent = text.replace('收起评论', '查看更多' + Math.floor(Math.random() * 20 + 5) + '条评论');
                        showToast('已收起评论');
                    }
                });
            });
        }
        
        // 绑定评论输入框事件
        function bindCommentInputs() {
            commentInputs.forEach(input => {
                input.addEventListener('keyup', function(e) {
                    if (e.key === 'Enter') {
                        const commentText = this.value.trim();
                        if (commentText) {
                            this.value = '';
                            showToast('评论成功');
                            
                            // 模拟添加新评论
                            const commentsContainer = this.closest('.feed-card').querySelector('.feed-comments');
                            const newComment = document.createElement('div');
                            newComment.className = 'comment-item';
                            newComment.innerHTML = `
                                <div class="comment-header">
                                    <img src="https://picsum.photos/id/237/100/100" alt="评论者头像" class="comment-avatar">
                                    <span class="comment-author">我</span>
                                    <span class="comment-time">刚刚</span>
                                </div>
                                <div class="comment-text">
                                    ${commentText}
                                </div>
                                <div class="comment-actions">
                                    <button class="comment-action">
                                        <i class="far fa-heart"></i>
                                        <span>0</span>
                                    </button>
                                    <button class="comment-action">
                                        <i class="far fa-comment"></i>
                                        <span>回复</span>
                                    </button>
                                </div>
                            `;
                            
                            // 添加到评论区顶部
                            const firstChild = commentsContainer.firstChild;
                            commentsContainer.insertBefore(newComment, firstChild);
                            
                            // 更新评论数量
                            const commentStat = this.closest('.feed-card').querySelector('.feed-stat .fa-comment').parentElement.querySelector('span');
                            commentStat.textContent = parseInt(commentStat.textContent) + 1;
                            
                            // 重新绑定事件
                            bindCommentLikeButtons();
                            bindReplyButtons();
                        }
                    }
                });
            });
        }
        
        // 绑定分享按钮事件
        function bindShareButtons() {
            document.querySelectorAll('.feed-action').forEach(btn => {
                if (btn.querySelector('.fa-share-square')) {
                    btn.addEventListener('click', function() {
                        showToast('分享功能待实现');
                    });
                }
            });
        }
        
        // 绑定其他按钮事件
        function bindOtherButtons() {
            // 搜索按钮
            searchBtn.addEventListener('click', () => {
                showToast('搜索功能待实现');
            });
            
            // 消息按钮
            messageBtn.addEventListener('click', () => {
                showToast('查看消息通知');
            });
            
            // 发布动态按钮
            postBtn.addEventListener('click', () => {
                showToast('进入发布动态页面');
            });
            
            // 分类标签切换
            feedTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabText = this.textContent;
                    feedTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    showToast(`已切换到${tabText}`);
                });
            });
            
            // 加载更多
            loadMoreBtn.addEventListener('click', function() {
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span> 加载中...</span>';
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-plus"></i><span> 加载更多动态</span>';
                    showToast('已加载更多动态');
                }, 1500);
            });
            
            // 评论工具按钮
            document.querySelectorAll('.comment-tool').forEach(tool => {
                tool.addEventListener('click', function() {
                    if (this.querySelector('.fa-image')) {
                        showToast('图片上传功能待实现');
                    } else if (this.querySelector('.fa-smile')) {
                        showToast('表情功能待实现');
                    }
                });
            });
        }
        
        // 初始化
        function init() {
            bindFeedMenus();
            bindLikeButtons();
            bindCommentLikeButtons();
            bindCommentButtons();
            bindReplyButtons();
            bindShowMoreComments();
            bindCommentInputs();
            bindShareButtons();
            bindOtherButtons();
        }
        
        // 启动
        init();
    </script>
</body>
</html>